<template>
  <div class="reg">
    <van-nav-bar title="注册账户" left-arrow @click-left="$router.go(-1)" />
    <div class="regipt">
      <div class="inptext">
        <span class="text_6">账号</span>
        <input
          class="text_7"
          type="number"
          v-model="phone"
          placeholder="请输入手机号"
          @blur="getCheckphone1"
        />
      </div>
      <div class="inptext2">
        <div class="text11">
          <span class="text_6">验证码</span>
          <input
            class="text_7"
            type="password"
            v-model="code"
            placeholder="请输入验证码"
          /><span class="test" @click="getCode()">{{ sendMsg }}</span>
        </div>
      </div>
      <div class="inptext">
        <span class="text_6">新密码</span>
        <input
          class="text_7"
          :type="pwdflag ? 'password' : 'text'"
          v-model="password"
          placeholder="6位以上字母组合"
        />
        <i class="fa fa-eye" v-show="pwdflag" @click="pwdflag = false"></i>
        <i
          class="fa fa-eye-slash"
          v-show="!pwdflag"
          @click="pwdflag = true"
        ></i>
      </div>
      <button class="text-wrapper_6" @click="reg">注册</button>
    </div>
    <div class="group_4">
      <label for="" class="box_10"
        ><input
          type="checkbox"
        />登录/注册表示同意<span>《用户协议》</span>和<span
          >《隐私协议》</span
        ></label
      >
    </div>
  </div>
</template>

<script>
import http from "@/api/index";
export default {
  data() {
    return {
      pwdflag: true,
      phone: "",
      password: "",
      code: "",
      sendMsg: "获取验证码",
      time: 60,
    };
  },
  methods: {
    getCheckphone1() {
      let reqData = {
        phone: this.phone,
      };
      http.checkphone1(reqData).then((res) => {
        let { code, data, msg } = res.data;
        if (code == 200) {
          this.$toast.success("手机号可以注册");
        } else {
          this.$dialog
            .alert({
              title: "系统提示",
              message: msg,
            })
            .then(() => {
              // on close
            });
        }
      });
    },
    getCode() {
      if (this.sendMsg == "获取验证码") {
        this.outTime();
        let reqData = {
          phone: this.phone,
        };
        http.sendlogin(reqData).then((res) => {
          let { code, data, msg } = res.data;
          if (code == 200) {
            this.$toast.success("验证码已发送到您的手机，请注意查收");
          } else {
            this.$dialog
              .alert({
                title: "系统提示",
                message: msg,
              })
              .then(() => {
                // on close
              });
          }
        });
      }
    },
    outTime() {
      if (this.time > 0) {
        this.time--;
        this.sendMsg = this.time + "秒";
        setTimeout(() => {
          this.outTime();
        });
      } else {
        this.sendMsg = "获取验证码";
      }
    },
    reg() {
      let reqData = {
        phone: this.phone,
        password: this.password,
        code: this.code,
      };

      http.register(reqData).then((res) => {
        let { code, data, msg } = res.data;
        if (code == 200) {
          this.$toast.success("注册成功");
          this.$router.push("login");
        } else {
          this.$dialog
            .alert({
              title: "系统提示",
              message: msg,
            })
            .then(() => {
              // on close
            });
        }
      });
    },
  },
};
</script>

<style scoped>
.reg {
  position: relative;
}
.inptext {
  width: 268px;
  height: 50px;
  border-bottom: 1px solid #ccc;
  /* background: red; */
  margin: 10px 0 0 53px;
  display: flex;
  justify-content: space-between;
}
.inptext2 {
  width: 268px;
  height: 50px;
  border-bottom: 1px solid #ccc;
  /* background: red; */
  margin: 10px 0 0 53px;
}
.text_6 {
  width: 31px;
  height: 15.5px;
  color: rgba(68, 67, 67, 1);
  font-size: 16px;
  font-family: PingFangSC-Medium;
  text-align: left;
  white-space: nowrap;
  line-height: 16px;
  margin-top: 15px;
  margin-right: 40px;
}
.text_7 {
  width: 266.5px;
  height: 20px;
  border: none;
  color: rgba(153, 153, 153, 1);
  font-size: 12px;
  font-family: PingFangSC-Regular;
  text-align: left;
  white-space: nowrap;
  line-height: 12px;
  margin: 15px 0 0 0px;
}
.fa {
  font-size: 20px;
  margin-top: 15px;
}
.text11 {
  display: flex;
  justify-content: space-between;
}
.test {
  width: 100px;
  height: 20px;
  font-size: 12px;
  white-space: nowrap;
  margin: 15px 0 0 0px;
  background-image: linear-gradient(
    257deg,
    rgba(182, 220, 255, 1) 0,
    rgba(182, 220, 255, 1) 0,
    rgba(185, 182, 229, 1) 100%,
    rgba(185, 182, 229, 1) 100%
  );
  border-radius: 10px;
  text-align: center;
  line-height: 20px;
}
.text-wrapper_6 {
  background-image: linear-gradient(
    -73deg,
    rgba(182, 220, 255, 1) 0,
    rgba(182, 220, 255, 1) 0,
    rgba(185, 182, 229, 1) 100%,
    rgba(185, 182, 229, 1) 100%
  );
  border-radius: 24px;
  height: 48px;
  width: 268.5px;
  margin: 44.5px 0 0 53.5px;
  border: none;
  color: rgba(45, 50, 67, 1);
  font-size: 17px;
}

.group_4 {
  width: 375px;
  height: 13px;
  position: absolute;
  bottom: 200px;
}
.box_10 {
  width: 267.5px;
  height: 13px;
  margin: 0;
  white-space: nowrap;
  font-size: 12px;
  text-align: center;
  position: absolute;
  left: 50%;
  /* bottom: 50px; */
  transform: translateX(-50%);
}
.box_10 span {
  color: rgba(46, 114, 186, 1);
}
</style>
